<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--
  类属性的设置方法
  一、可以直接在data中设置一个属性来进行设置
  例如  isActive:true,
  二、可以在data中设置一个对象，这个对象可以有多个属性
   classObj:{
                mydiv2: true,
                mydiv: false,
            }
   三、可以在计算属性中来进行设置
   //使用计算属性的方式来设置样式
        computed:{
            classObj(){//方法
                return { //对象
                    mydiv:this.isActive,
                    mydiv2 :this.flag
                }
            }
        }
      四、可以在使用的时候用数组来进行  mydivClass是数组
       <div v-bind:class="[mydivClass,mydivClass2]">{{msg}}</div>

 -->
  <div id="app">
      <!--isActive 是data的属性，可以设置成true或者false  可以通过f12来看class属性是否设置-->
     <!-- <div :class="{ active: isActive }">{{msg}}</div>-->
      <!--类属性  可以设置成对象的形式，也可以设置成单个属性的形式   这里使用的是计算属性来进行设置
       在前端页面的话，可以通过app.isActive=false等来修改控制样式
      -->
       <div v-bind:class="classObj">{{msg}}</div>
      <!--v-bind和：表示内容一样--->
      使用数组的方式来进行展示  <div v-bind:class="[mydivClass,mydivClass2]">{{msg}}</div>
      <!--flag?mydivClass:''  flag mydivClass属性-->
      使用三目运算符    <div v-bind:class="[flag?mydivClass:'',mydivClass2]">{{msg}}</div>
      <!--mydiv样式    flag属性-->
      对象的方式  <div v-bind:class="[{mydiv:flag},mydivClass2]">{{msg}}</div>


  </div>

<script>
    var app =new Vue({
      el:"#app",
        data: {
             msg:'hello world',
            isActive:true,
            flag:true,
            mydivClass:'mydiv',
            mydivClass2:'mydiv2',



        },
        //使用计算属性的方式来设置样式
        computed:{
            classObj(){//方法
                return { //对象
                    mydiv:this.isActive,
                    mydiv2 :this.flag
                }
            }
        }

    });

</script>
  <style>
      .mydiv2{
          border:1px solid #dedede;
      }
      .mydiv1{
          font-size: 30px;
      }
      .mydiv {
          font-weight: bold;
          color: #ff0000;
      }
  </style>
</body>
</html>